<template>
	<view class="user-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="提取识别文字"></uni-navbar></view>

		<view class="sub-box">
			<view><u-input v-model="ocrText" input-align="left" type="textarea" placeholder="这里是识别内容" :clearable="false" :height="320" :maxlength="-1" /></view>
		</view>

		<view class="form-box" :key="key">
			<u-form-item class="form-item" label="图片识别" v-if="type != 'audio'">
				<view class="input-src">
					<block v-for="(item, sIndex) in srcList" :key="sIndex"><image class="form-img" :src="item" mode="aspectFill" @click="previewImage(srcList, index)"></image></block>
					<button class="btn" type="primary" @click="uploadBtn('image')"><text class="add"></text></button>
				</view>
			</u-form-item>
			<u-form-item class="form-item" label="语音识别" v-if="type != 'image'">
				<view class="input-src">
					<view class="file-box" v-for="(item, aIndex) in audioList" :key="aIndex">
						<label class="file-name clamp">{{ item }}</label>
					</view>
					<view class="btn">
						<uni-record :maximum="60" @confirm="saveRecord"><view class="add"></view></uni-record>
					</view>
				</view>
			</u-form-item>
		</view>

		<view class="fiexd-btm">
			<view class="flex-box">
				<u-button class="form-btn" type="error" :disabled="disabled" @click="confirm">确认使用</u-button>
				<u-button class="form-btn" type="success" :disabled="disabled" @click="reseat">重置</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import uniRecord from '@/components/uni-record.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniRecord
	},
	data() {
		return {
			limit: 1,
			key: -1,
			type: '',
			ocrKey: '',
			disabled: true,

			urlImage: this.$baseUrl + '/baidu/ocrUpload',
			urlAudio: this.$baseUrl + '/baidu/audio',
			fileInfo: [],
			srcList: [],
			audioList: [],
			voicePath: '',
			ocrText: ''
		};
	},
	onLoad(option) {
		if (option && option.ocrKey) {
			this.ocrKey = option.ocrKey;
		}
		if (option && option.type) {
			this.type = option.type;
		}
		this.loadLogin();
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				uni.authorize({
					scope: 'scope.record',
					success: (res) => {
						console.log('录音授权成功', res);
					}
				});
			} else {
				// this.$logout();
			}
		},
		uploadBtn(e) {
			if (e == 'image') {
				uni.chooseImage({
					count: this.limit,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.srcList = [];
						res.tempFiles.forEach((item) => {
							this.upLoadImage(item);
							this.srcList.push(item.path);
						});
					}
				});
			} else {
				uni.chooseMessageFile({
					count: this.limit,
					type: 'all',
					success: (res) => {
						res.tempFiles.forEach((item) => {
							this.upLoadAudio(item);
						});
					}
				});
			}
		},
		upLoadImage(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.urlImage,
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					// Authorization: this.userInfo.Authorization
				},
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode != '200') {
						this.$msg('识别失败！');
						return false;
					}
					let data = JSON.parse(res.data);
					if (data && data.data) {
						let file = {
							name: data.data.fileList[0].fileNameW ? data.data.fileList[0].fileNameW : data.data.fileList[0].name,
							path: data.data.fileList[0].path,
							size: data.data.fileList[0].size
						};
						this.fileInfo = this.fileList;
						file && this.fileInfo.push(file);
						this.$store.commit('filePush', this.fileInfo);
						this.ocrText += data.data.ocrList[0];
						this.disabled = false;
						this.key--;
					} else {
						this.$msg('识别失败！');
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		upLoadAudio(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.urlAudio,
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					// Authorization: this.userInfo.Authorization
				},
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode != '200') {
						this.$msg('上传失败！');
						return false;
					}
					let data = JSON.parse(res.data);
					if (data && data.data) {
						let file = {
							name: data.data.fileList[0].fileNameW ? data.data.fileList[0].fileNameW : data.data.fileList[0].name,
							path: data.data.fileList[0].path,
							size: data.data.fileList[0].size
						};
						this.fileInfo = this.fileList;
						file && this.fileInfo.push(file);
						this.$store.commit('filePush', this.fileInfo);
						this.ocrText += data.data.audioList[0];
						this.audioList.push(file.name);
						this.disabled = false;
						this.key--;
					} else {
						this.$msg('识别失败！');
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		saveRecord(e) {
			console.log(e);
			this.upLoadAudio({
				path: e
			});
		},
		confirm() {
			let pre = this.$prePage();
			if (pre && pre.form) {
				pre.$set(pre.form, this.ocrKey, this.ocrText);
			}
			uni.navigateBack();
		},
		reseat() {
			this.ocrText = '';
			this.$store.commit('filePush', []);
			this.srcList = [];
			this.audioList = [];
		},
		previewImage(list, index) {
			uni.previewImage({
				current: index,
				urls: list
			});
		}
	}
};
</script>

<style lang="scss">
.user-view {
	background-color: #fff;
}

.sub-box {
	padding: 20rpx 30rpx;
	border-bottom: 20rpx solid $u-border-color;

	.sub-img {
		margin: 0 auto;
		width: 400rpx;
		height: 400rpx;
	}
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}

	.input-src {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.file-box {
		display: flex;
		justify-content: space-between;
		width: 500rpx;
		text-align: left;
	}

	.file-name {
		flex: 1;
		margin-bottom: 10rpx;
		font-size: 16px;
		color: #808080;
	}

	.form-img {
		width: 120rpx;
		margin-right: 16rpx;
	}
}

.btn {
	position: relative;
	display: flex;
	background: #fff;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	margin-left: 0;
	padding: 0;
}

.add {
	width: 120rpx;
	height: 120rpx;
	background: #fff url('~@/static/img/add.png') no-repeat center center;
	background-size: 120rpx;
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
